<template>
  <section class="middle">
    <div class="middle-left">
      <ul class="content">
        <li class="content-item">
          <div class="text-sty">
            <span>生产车间1</span>
            <a>408</a>
          </div>
          <div class="img-sty">
            <img src="/src/assets/imgs/middle-item2.png">
          </div>
        </li>
        <li class="content-item">
          <div class="text-sty">
            <span>生产车间2</span>
            <a>1407</a>
          </div>
          <div class="img-sty">
            <img src="/src/assets/imgs/middle-item2.png">
          </div>
        </li>
        <li class="content-item">
          <div class="text-sty">
            <span>生产车间3</span>
            <a>3182</a>
          </div>
          <div class="img-sty">
            <img src="/src/assets/imgs/middle-item2.png">
          </div>
        </li>
      </ul>
    </div>
    <div class="middle-center">

    </div>
    <div class="middle-right">
      <ul class="content">
        <li class="content-item">
          <div class="text-sty">
            <span>生产车间1</span>
            <a>408</a>
          </div>
          <div class="img-sty">
            <img src="/src/assets/imgs/middle-item2.png">
          </div>
        </li>
        <li class="content-item">
          <div class="text-sty">
            <span>生产车间2</span>
            <a>1407</a>
          </div>
          <div class="img-sty">
            <img src="/src/assets/imgs/middle-item2.png">
          </div>
        </li>
        <li class="content-item">
          <div class="text-sty">
            <span>生产车间3</span>
            <a>3182</a>
          </div>
          <div class="img-sty">
            <img src="/src/assets/imgs/middle-item2.png">
          </div>
        </li>
      </ul>
    </div>
  </section>

</template>

<script setup name="Middle">
import {nextTick, onMounted, ref} from "vue";

onMounted(async () => {

})

</script>

<style scoped lang="scss">
.middle {
  height: 20%;
  width: 40%;
  position: absolute;
  top: 10%;
  z-index: 8;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;


  .middle-left {
    height: 90%;
    background: url('@/assets/imgs/middle-left.png') no-repeat center;
    background-size: contain;
    flex: 0 0 30%;
    position: relative;
    left: 50px;
  }

  .middle-center {
    height: 70%;
    width: 40%;
    background: url('@/assets/imgs/middle-top1.png') no-repeat center;
    background-size: 100%;
    margin-bottom: 95px;
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .content-item {
      display: inherit;
      align-items: inherit;
      justify-content: inherit;
      flex-direction: row;
      text-align: right;
      letter-spacing: 2px;
      margin: 5px 0;
      position: relative;

      .text-sty {
        margin-right: 5px;
      }

      span, a {
        display: block;
        font-family: arial, sans-serif;
        font-size: 14px;
      }

      a {
        color: #EEDE91;
      }

      .img-sty {
        display: inherit;
        align-items: inherit;
        justify-content: inherit;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #023600;
        border: 1px solid #FFFFFF;

        img {
          width: 20px;
          height: 20px;
        }
      }

    }

    .content-item:first-child {
      right: 15px;
    }
    .content-item:nth-child(2) {
      right: -5px;
    }
    .content-item:last-child {
      right: -27px;
    }

  }

  .middle-right {
    height: 90%;
    background: url('@/assets/imgs/middle-right.png') no-repeat center;
    background-size: contain;
    flex: 0 0 30%;
    position: relative;
    right: 50px;

    .content-item {
      text-align: left;

      .text-sty {
        order: 2;
        margin-left: 5px;
      }
      .img-sty {
        order: 1;
      }
    }

    .content-item:first-child {
      right: -15px;
    }
    .content-item:nth-child(2) {
      right: 5px;
    }
    .content-item:last-child {
      right: 27px;
    }

  }
}

</style>
